<template>
	<view>
		<view :class="pageFixed ? 'pageFixed page mian' : 'page mian'" style="width: 100%;">
		  <view class="height94"></view>
		  <view class="search-outer">
		    <input
		      class="search-input"
		      placeholder="输入品牌搜索"
		      onInput="handleSearch"
		    />
		    <button class="searchBtn"></button>
		  </view>
		  <view class="page-section-demo">
		  <scroll-view 
		    :scroll-y="true" 
		    style="height: 100vh;">
		    <view class="carMain">
		        <block v-for="(item,index) in brandList" :key="index">
		          <view class="h3" :id="item.initial">{{item.initial}}</view>
		          <block v-for="(itm,idx) in item.origin">
		            <view class="ul" @click="brandClick" :data-logo="itm.logo" :data-name="itm.brand_name">
		              <view class="li">
		                <view class="carImg li-item">
		                  <image mode="scaleToFill" :src="itm.logo"></image>
		                </view>
		                <view class="carName li-item">{{itm.brand_name}}</view>
		              </view>
		            </view>
		          </block>
		        </block>
		    </view>
		  </scroll-view>
		  </view>
		</view>
		<view class="carsList" v-show="!carsListShow">
		  <view class="topBox">
		    <view class="shouqi" onTap="closeCarList" data-thisName="seriesList">
		      <image mode="scaleToFill" src="/assets/images/shouqi.svg"/>
		      <view>收起</view>
		    </view>
		    <view class="h4">选择车系</view>
		  </view>
		  <view class="ul" v-for="(item,index) in seriesList" :key="index">
		    <view 
		      class="carHref carsLogo" 
		      @click="seriesClick" 
		      :data-brandid="item.brandId" 
		      :data-brandname="item.brandName" 
		      :data-id="item.carTypeNo" 
		      :data-name="item.carTypeName" 
		      :data-logo="item.logo">
		      <view class="carListName">{{item.carTypeName}}</view>
		    </view>
		  </view>
		</view>
		
		<view class="cartypeList" v-show="!cartypeShow">
		  <view class="topBox">
		    <view class="shouqi" @click="closeCarList" data-thisName="cartypeList">
		      <image mode="scaleToFill" src="/assets/images/shouqi.svg"/>
		      <view>收起</view>
		    </view>
		    <view class="h4">选择车辆型号</view>
		  </view>
		  <view class="ul" v-for="(item,index) in cartypeList" :key="index">
		    <view 
		    class="carHref" 
		    @click="cartypeClick" 
		    :data-id="item.carTypeNo" 
		    :data-name="item.name">
		      <text class="carListName">{{item.name}}</text>
		    </view>
		  </view>
		</view> 
		
		<view class="a-z">
		  <view class="a-z-item">*</view>
		  <view class="a-z-item" id="a-zBox">
		    <block v-for="(item,index) in brandList" :key="index">
		      <button @click="toView" :data-id="item.initial">{{item.initial}}</button>
		    </block>
		  </view>
		</view>
	</view>
</template>

<script>
	import {
	  getCarBrandList,
	  getSeriesTypeList,
	  getCarvehicleTypeList
	} from '@/service/chengyongche'
	export default {
		data() {
			return {
				pageFixed: false,
				carsListShow: true,
				cartypeShow: true,
				brandList: [],
				seriesList: [],
				brandId: '',
				userInfoData: {},
				header: {},
				cartypeList: '',
			}
		},
		onLoad() {
			let userInfoData = uni.getStorageSync('userInfo');
			let header = {
				'content-type': 'application/x-www-form-urlencoded',
				'Authorization': userInfoData.token
			};
			this.userInfoData = userInfoData;
			this.header = header;
			this._getCarBrandList(header);
		},
		methods: {
			/**
			 * 锚点跳转
			 * @method toView
			 * @param {*} event
			 */
			toView(event) {
				const id = event.currentTarget.dataset.id;
				this.toView = id
			},
			/**
			 * 输入搜索内容触发
			 * @method handleSearch
			 */
			handleSearch(e) {
				this.searchFun(e.detail.value)
			},
			/**
			 * 点击品牌触发
			 * @method brandClick
			 * @param {*} event
			 */
			brandClick(event) {
				console.log(event)
				uni.showLoading();
				const brandName = event.currentTarget.dataset.name;
				const logo = event.currentTarget.dataset.logo;
				this.brandName = brandName; this.logo = logo; this.cartypeShow = true
				const prams = {brandName};
				this._getSeriesTypeList(prams, this.header)
			},
			/**
			 * 点击车系触发
			 * @method seriesClick
			 * @param {*} event
			 */
			seriesClick(event) {
				uni.showLoading();
				const brandId = event.currentTarget.dataset.brandid;
				const brandName = event.currentTarget.dataset.brandname;
				const seriesId = event.currentTarget.dataset.id;
				const seriesName = event.currentTarget.dataset.name;
				this.brandId = brandId; this.brandName = brandName; this.seriesId = seriesId; this.seriesName = seriesName;
				const prams = {brandId, carTypeId: seriesId};
				this._getCarvehicleTypeList(prams, this.header);
			},
			/**
			 * 点击车辆型号触发
			 * @method seriesClick
			 * @param {*} event
			 */
			cartypeClick(event) {
				const brandId = this.brandId;
				const brandName = this.brandName;
				const seriesId = this.seriesId;
				const seriesName = this.seriesName;
				const carImg = this.logo;
				const carTypeId = event.currentTarget.dataset.id;
				const carTypeName = event.currentTarget.dataset.name;
				this.carTypeId = carTypeId; this.carTypeName = carTypeName
				let pages = getCurrentPages();
				let prevPage = pages[ pages.length - 2 ];  
				prevPage.$vm.useBrands = {
					brandId,
					brandName,
					seriesId,
					seriesName,
					carImg,
					carTypeId,
					carTypeName
				}
				prevPage.$vm.isBack = true;
				//上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。
				//最后就是返回上一个页面。
				uni.hideLoading();
				uni.navigateBack({
						delta: 1  // 返回上一级页面。
				})
			},
			/**
			 * 关闭右侧弹出菜单
			 * @method closeCarList
			 * @param {*} event
			 */
			closeCarList(event) {
				const _this = this;
				const thisName = event.currentTarget.dataset.thisName;
				if(thisName == "cartypeList") {
					//  收起车型列表
					_this.cartypeShow = true;
				}else {
					//  收起车系/车型列表
					_this.carsListShow = true
					_this.cartypeShow = true
				}
			},
			searchFun(searchVal) {
				const brandListOld = this.brandListOld;
				let brandList = [];
				for(let item of brandListOld) {
					if(item.brand_name.indexOf(searchVal) != -1) {
						brandList.push(item)
					}
				}
				this.resetData(brandList);
			},
			/**
			 * 重置数据格式
			 * @method resetData
			 * @param {*} event
			 */
			resetData(brandList) {
				// 重置数据格式
				let tempArr = [];
				let afterData = [];
				for (let i = 0; i < brandList.length; i++) {
					if (tempArr.indexOf(brandList[i].initial) === -1) {
						afterData.push({
							initial: brandList[i].initial,
							origin: [brandList[i]]
						});
						tempArr.push(brandList[i].initial);
					} else {
						for (let j = 0; j < afterData.length; j++) {
							if (afterData[j].initial == brandList[i].initial) {
								afterData[j].origin.push(brandList[i]);
								break;
							}
						}
					}
				}
				// 排序
				function compare(propertyName) {
					return function(object1, object2) {
						var value1 = object1[propertyName];
						var value2 = object2[propertyName];
						if (value2 < value1) {
							return 1;
						} else if (value2 > value1) {
							return -1;
						} else {
							return 0;
						}
					}
				}
				//使用方法
				afterData.sort(compare("initial"));
				this.brandList = afterData
			},
			// -----------------------网络请求--------------------------
			_getCarBrandList(header) {
				getCarBrandList(header).then(res => {
					const data = res.data;
					if(data.resultCode != "0000") {
						uni.showToast({
							icon: 'none',
							title: res.data.resultMsg,
							duration: 3000
						});
					}else {
						const brandList = data.data.brandList;
						this.brandListOld = brandList
						this.resetData(brandList);
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '网络不可用，请检查您的网络后重试！',
						duration: 3000
					});
				})
			},
			_getSeriesTypeList(prams , header) {
				getSeriesTypeList(JSON.stringify(prams), header).then(res => {
					console.log(res);
					const data = res.data;
					if(data.resultCode != "0000") {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '该品牌暂无车系',
							duration: 3000
						});
					}else {
						const seriesList = data.data.seriesList;
						this.seriesList = seriesList;
						this.carsListShow = false;
						this.pageFixed = true
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '网络不可用，请检查您的网络后重试！',
						duration: 3000
					});
				})
			},
			_getCarvehicleTypeList(prams, header) {
				getCarvehicleTypeList(JSON.stringify(prams), header).then(res => {
					console.log(res);
					const data = res.data;
					if(data.resultCode != "0000") {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '该车系暂无车型',
							duration: 3000
						});
					}else {
						const carTypeList = data.data.carTypeList;
						this.cartypeList = carTypeList;
						this.cartypeShow = false;
						this.pageFixed = true;
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '网络不可用，请检查您的网络后重试！',
						duration: 3000
					});
				})
			},
		}
	}
</script>

<style>
	image {
	  width: 100%;
	  height: 100%;
	}
	
	.height94 {
	  height: 94rpx;
	}
	.search-outer {
	  /* position: relative; */
	  position: fixed;
	  top: 0;
	  width: 100%;
	  padding: 0 30rpx;
	  background: #ffffff;
	  box-sizing: border-box;
	  border-bottom: 1px solid #e4e4e4;
	  box-shadow: 0 4rpx 5rpx -3rpx #e4e4e4;
	}
	.search-outer input {
	  background: #ededef;
	  border-radius: 30rpx;
	  margin-top: 16rpx;
	  margin-bottom: 16rpx;
	  height: 54rpx;
	  line-height: 54rpx;
	  width: 100%;
	  text-align: center;
	  font-size: 28rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.search-outer .searchBtn {
	  height: 54rpx;
	  width: 54rpx;
	  /* background: url(/assets/images/goods/sousuo.svg) no-repeat center center; */
	  background-size: 24rpx 24rpx;
	  position: absolute;
	  left: 46rpx;
	  top: 16rpx;;
	  border: 0;
	}
	
	.h3 {
	  height: 54rpx;
	  line-height: 54rpx;
	  padding-left: 30rpx;
	  box-sizing: border-box;
	  background: #eaeaea;
	}
	.ol {
	  background: #ffffff;
	  border-top: 1px solid #eaeaea;
	  border-bottom: 1px solid #eaeaea;
	  padding-left: 30rpx;
	}
	.ol .li {
	  height: 86rpx;
	  line-height: 86rpx;
	  font-size: 28rpx;
	}
	
	.carsLogo {
	  display: flex;
	  align-items: center;  /* 垂直居中 */
	}
	.carsLogo .carImg {
	  width: 100rpx;
	  height: 80rpx;
	}
	
	.page-section-demo {
	  /* position: fixed;
	  top: 140rpx;
	  right: 0;
	  bottom: 0;
	  left: 0; */
	  height: 100vh;
	}
	.carMain .ul {
	  background: #ffffff;
	  padding: 0 30rpx;
	  /* border-bottom: 1px solid #eaeaea; */
	}
	
	.carMain .ul .li {
	  height: 86rpx;
	  line-height: 86rpx;
	  font-size: 28rpx;
	  display: flex;
	  /* justify-content: center; */
	  align-items: center;  /* 垂直居中 */
	}
	
	/* .carMain .ul .li .li-item {
	  
	} */
	.carMain .ul .li .carImg {
	  width: 60rpx;
	  height: 60rpx;
	  margin-right: 15rpx;
	}
	.carImg {
	  width: 60rpx;
	  height: 60rpx;
	  margin-right: 15rpx;
	}
	
	.carMain .ul .li .carImg image {
	  
	}
	.carMain .ul .li .carName {
	  flex: 1;
	  border-bottom: 1px solid #eaeaea;
	  height: 88rpx;
	}
	
	
	
	.carsList {
	  width: 540rpx;
	  height: 100vh;
	  background: #f3f3f3;
	  box-shadow: -4px 0 26rpx 8rpx #eaeaea;
	  position: fixed;
	  top: 0;
	  right: 0;
	  overflow: scroll;
	  z-index: 999;
	  padding-top: 108rpx;
	  box-sizing: border-box;
	}
	.topBox {
	  position: fixed;
	  top: 0px;
	  width: 100%;
	  background: #ffffff;
	}
	.topBox .shouqi {
	  height: 54rpx; 
	  background: #ffffff;
	  display: flex;
	  align-items: center;
	  font-size: 24rpx;
	  padding-left: 30rpx;
	} 
	.topBox .shouqi image{
	  width: 25rpx; 
	  height: 25rpx;
	  margin-right: 10rpx;
	}
	.h4 {
	  height: 54rpx;
	  line-height: 54rpx;
	  padding: 0 30rpx;
	  box-sizing: border-box;
	  font-size: 24rpx;
	  border-bottom: 1px solid #eaeaea;
	  background: #eaeaea;
	}
	.carsList .ul, .cartypeList .ul {
	  padding-left: 30rpx;
	  overflow: hidden;
	  background: #ffffff;
	}
	.carsList .ul .carHref {
		padding: 0;
		border-bottom: 1px solid #eaeaea;
		padding-right: 30rpx;
		padding: 20rpx 10rpx 20rpx 0;
	}
	
	.cartypeList .ul .carHref {
	  padding: 0;
	  border-bottom: 1px solid #eaeaea;
	  padding-right: 30rpx;
	  padding: 20rpx 10rpx 20rpx 0;
	}
	
	.cartypeList {
	  width: 340rpx;
	  /* width: 220rpx; */
	  height: 100vh;
	  background: #f3f3f3;
	  box-shadow: -4px 0 26rpx 8rpx #eaeaea;
	  position: fixed;
	  top: 0;
	  right: 0;
	  overflow: scroll;
	  z-index: 999;
	  padding-top: 108rpx;
	  box-sizing: border-box;
	}
	
	.mbox {
	  width: 100%;
	  height: 100vh;
	  position: fixed;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	}
	
	
	.a-z {
	  width: 36rpx;
	  position: fixed;
	  top: 240rpx;
	  right: 0;
	  z-index: 10;
	  text-align: center;
	}
	.a-z .a-z-item {
	  color: #f88715;
	  font-size: 22rpx;
	}
	.a-z .a-z-item button {
	  background: transparent;
	  border: 0;
	  font-size: 22rpx;
	  height: 32rpx;
	  line-height: 32rpx;
	  color: #f88715;
	}
	
	.pageFixed {
	  position: fixed;
	}
</style>
